<!-- 柱状图的二次封装 -->
<template>
  <div id="barEcharts">
    <myCard :title="seriesDataInfo.name">
      <template #default>
        <myEcharts :option="option" v-bind="seriesDataInfo"></myEcharts>
      </template>
    </myCard>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps, withDefaults } from 'vue'

import myCard from '../../card'
import myEcharts from '..'

import type { LineEchartsTypes } from '..'

interface PropsTypes {
  // 图表信息
  seriesDataInfo: LineEchartsTypes
}

const props = withDefaults(defineProps<PropsTypes>(), {})

const option = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: props.seriesDataInfo.xAixsData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: props.seriesDataInfo.data,
        type: 'bar'
      }
    ]
  }
})
</script>
